<!--微信扫码，成果签字-->
<template>
  <div v-loading="loading">
    <div v-if="sigStep == 1">
      <div class="header">
        <el-row :xs="24" >
          <el-col :span="24" class="header_title" >
            <img :src="require('@/assets/img/hlogo.png')" class="img" >广东杰信测绘科技有限公司
          </el-col>
        </el-row>
        <el-row :xs="24" style="background-color: burlywood;font-size: 14pt">
          <el-col :span="24"><div>测绘成果交接签收单</div></el-col>
        </el-row>
      </div>
      <div>
        <el-form ref="form" :model="form" :rules="rules" :xs="24">
          <el-form-item label="项目名称:" label-width="100px" prop="projectNickname">
            <strong >{{form.projectNickname}}</strong>
          </el-form-item>
          <el-form-item label="客户单位名称(盖章):" label-width="150px" prop="clientName">
            <strong >{{form.clientName}}</strong>
          </el-form-item>
          <el-form-item label="成果清单:" prop="Results" ><br>
            <el-table :data="achList" size="small" border style="width: 100%" :header-cell-style="{background: 'steelblue',color:'white'}">
              <el-table-column prop="seqNum" label="序号" width="90">
              </el-table-column>
              <el-table-column prop="billName" label="成果名称" width="180">
              </el-table-column>
              <el-table-column prop="billNo" label="成果编号" width="180">
              </el-table-column>
              <el-table-column prop="spec" label="规格" width="200">
              </el-table-column>
              <el-table-column prop="style" label="样式" width="90">
              </el-table-column>
              <el-table-column prop="num" label="数量(份)" width="70">
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="200">
              </el-table-column>
            </el-table>

          </el-form-item>
          <el-form-item label="客户签名处:" prop="signature"><span style="color: red">(请点击按钮进行签字)→</span><br>
            <div id="app">
              <img :src="'data:image/png;base64,'+ form.signature"  alt="" class="sig_img" >
              <el-button @click="handleReset" class="nav" plain type="primary">签字</el-button>
            </div>

          </el-form-item>
          <el-form-item label="联系电话:" label-width="100px" prop="clientPhone">
            <el-input v-model.number="form.clientPhone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="成果提交日期:" label-width="120px" prop="confirmTime" >
            <span>{{form.confirmTime}}</span>
          </el-form-item>
          <div class="header" style="background-color: burlywood;font-size: 14pt">
            <el-row :xs="24" >
              <el-col :span="24"><div>客户满意度调查表</div></el-col>
            </el-row>
          </div>
          <el-form-item label=" 1、测绘项目成果质量:" prop="gradeQuality"> <br>
            <el-radio-group v-model="form.gradeQuality">
              <el-radio :label="20"><strong>非常满意</strong></el-radio>
              <el-radio :label="18"><strong>一般满意</strong></el-radio>
              <el-radio :label="14"><strong>满意</strong></el-radio>
              <el-radio :label="10"><strong>不满意</strong></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="2、测绘项目成果满足要求程度:" prop="gradeRequire"> <br>
            <el-radio-group v-model="form.gradeRequire">
              <el-radio :label="20"><strong>非常满意</strong></el-radio>
              <el-radio :label="18"><strong>一般满意</strong></el-radio>
              <el-radio :label="14"><strong>满意</strong></el-radio>
              <el-radio :label="10"><strong>不满意</strong></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="3、工作中工作人员协调交流和工作态度:" prop="gradeAttitude"> <br>
            <el-radio-group v-model="form.gradeAttitude">
              <el-radio :label="20"><strong>非常满意</strong></el-radio>
              <el-radio :label="18"><strong>一般满意</strong></el-radio>
              <el-radio :label="14"><strong>满意</strong></el-radio>
              <el-radio :label="10"><strong>不满意</strong></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="4、测绘工期进度情况:" prop="gradeProgress">  <br>
            <el-radio-group v-model="form.gradeProgress">
              <el-radio :label="20"><strong>非常满意</strong></el-radio>
              <el-radio :label="18"><strong>一般满意</strong></el-radio>
              <el-radio :label="14"><strong>满意</strong></el-radio>
              <el-radio :label="10"><strong>不满意</strong></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="5、测绘人员的技术熟练程度:" prop="gradeProficiency">     <br>
            <el-radio-group v-model="form.gradeProficiency">
              <el-radio :label="20"><strong>非常满意</strong></el-radio>
              <el-radio :label="18"><strong>一般满意</strong></el-radio>
              <el-radio :label="14"><strong>满意</strong></el-radio>
              <el-radio :label="10"><strong>不满意</strong></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="对本项目或者我司的建议是:" prop="clientAdvice">
            <el-input type="textarea" :rows="4" v-model="form.clientAdvice"></el-input>
          </el-form-item>

          <div style="text-align: center;padding-bottom: 30px;"> <el-button size="medium" type="primary" @click="onsubmit">提交</el-button> </div>
        </el-form>

      </div>

      <el-dialog title="签字" :visible.sync="dialogVisible" width="100%" append-to-body>
        <!-- 使用这个签名组件 -->
        <vue-esign ref="esign" class="mySign" :width="800" :height="400" :isCrop="isCrop"
                   :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="handleReset" type="danger" plain>清除（重写）</el-button>
          <el-button @click="handleGenerate" type="primary">确定</el-button>
      </span>
      </el-dialog>
    </div>

    <div v-if="sigStep == 2">
      <div class="bg" >

        <div class="logo">
          <div class="font_success">
            <span>{{form.projectNickname}}</span>
          </div>
          <span> <i class="el-icon-success"></i>已签收完成</span>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import vueEsign from 'vue-esign'

export default {
  data () {
    return {
      loading: true,
      img: true,
      sigStep: 1,
      dialogVisible: false,
      form: {
        projectNickname: '',  // 项目名称
        clientName: '',    // 客户单位名称
        signature: '',       // 客户签名
        clientPhone: '',     // 联系电话
        Results: '',        // 成果清单
        confirmTime: '', // 确认时间
        clientAdvice: '', // 备注
        gradeQuality: [],
        gradeRequire: [],
        gradeAttitude: [],
        gradeProgress: [],
        gradeProficiency: []
      },
      rules: {
        projectNickname: [
          {required: true, message: '请输入项目名称', trigger: 'blur'},
        ],
        clientName: [
          {required: true, message: '请输入客户单位名称', trigger: 'blur'},
        ],
        signature: [
          {required: true, message: '请输入签名', trigger: 'blur'},
        ],
        clientPhone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
        ],
        gradeQuality: [
          { required: true, message: '请至少选择一个', trigger: 'blur' }
        ],
        gradeRequire: [
          { required: true, message: '请至少选择一个', trigger: 'blur' }
        ],
        gradeAttitude: [
          { required: true, message: '请至少选择一个', trigger: 'blur' }
        ],
        gradeProgress: [
          { required: true, message: '请至少选择一个', trigger: 'blur' }
        ],
        gradeProficiency: [
          {required: true, message: '请至少选择一个', trigger: 'blur'}
        ]
      },
      achList: [],
      lineWidth: 5, // 画笔的线条粗细
      lineColor: '#ff0000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      resultImg: '', // 最终画布生成的base64图片
      isCrop: false // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    }
  },
  created () {
    this.init()
  },
  components: {
    vueEsign
  },
  methods: {
    init () {
      console.log(this.getUrlParams('projectNo'))
      this.getAchInfo(this.getUrlParams('projectNo'))
    },
    // 清空画板
    handleReset () {
      this.dialogVisible = true
      this.$refs.esign.reset()
    },
    // 获取链接参数
    getUrlParams (variable) {
      return decodeURIComponent((new RegExp('[?|&]' + variable + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || ''
    },
    // 获取当前成果项目信息
    getAchInfo (projectNo) {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/webapi/ach/info'),
        method: 'get',
        params: this.$http.adornParams({
          projectNo: projectNo
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.loading = false
          this.form = data.ach
          this.achList = data.list
        }
      })
    },
    // 签字图片生成
    handleGenerate () {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.form.signature = res.replace(/^data:image\/\w+;base64,/, '')
          this.dialogVisible = false
        }).catch((err) => {
        // 画布没有签字时会执行这里提示一下
        this.$message.warning('签名不能为空')
      })
    },
    // 提交成功
    onsubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl('/webapi/ach/update'),
            method: 'post',
            data: this.$http.adornData({
              projectNo: this.getUrlParams('projectNo'),
              authachEntity: this.form
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.loading = false
              this.$message.success('提交成功!')
              this.sigStep = 2
            }
          })
        }
      })
    },
  }
}
</script>

<style  scoped>
.header {
  text-align: center;
  font-size: 20px;
}
.header_title {
  background-color: #00b7ee;
  color: whitesmoke;
  font-weight: bolder;
  padding: 5px;
}
.el-table /deep/ th {
  padding: 0;
}
.el-table /deep/ td {
  padding: 0;
}
.signature {
  border: 1px solid black;
  position: relative;
}
.nav {
  position: absolute;
  top: 0;
  right: 0;
}

.img {
  width: 25px;
  height: 25px;
  margin-bottom: 2px;
}
.sig_img {
  padding-left: 2px;
  width: 99%;
  border: 1px solid #b3d8ff;
  background-color: ghostwhite;
  min-height: 140px;
}

.bg {
  min-height: 500px;
}
.font_success {
  color: gray;
  font-size: 11pt;
  text-align: left;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
}
.logo {
  color: green;
  font-size: 40px;
  width: 100%;
  text-align: center;
  height: 60px;
  margin-top: 30%;
}
.mySign {
  border:1px solid #333;
  box-shadow:inset 0 0 5px 5px #ccc;
}
</style>

